<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="js/vue.js"></script>
    </head>
    <body>
    <div id="app">
        <!--展示-->
        <div v-if="mode=='show'">

            <input type="text" v-model="query.name" placeholder="模糊查询">
            <select v-model="query.author">
                <option value="">请选择</option>
                <option >小明</option>
                <option >小天</option>
                <option >等等</option>
            </select>
            <input type="number" v-model="query.money1" placeholder="价格查询">
            <input type="number" v-model="query.money2" placeholder="价格查询">

            <button @click="selectBook">搜索</button>

            <button @click="toAdd">添加</button>
            <table border="1" cellspacing="0">
                <tr>
                    <td>编号</td>
                    <td>书名</td>
                    <td>类型</td>
                    <td>作者</td>
                    <td>状态</td>
                    <td>价格</td>
                    <td>操作</td>
                </tr>
                <tr v-for="a in tableData">
                    <td>{{a.id}}</td>
                    <td>{{a.name}}</td>
                    <td>{{a.type}}</td>
                    <td>{{a.author}}</td>
                    <td>{{a.sell==1?"在售":"下架"}}</td>
                    <td>{{a.money}}</td>
                    <td>
                        <button @click="toEdit(a)">修改</button>
                        <button @click="deleteBook(a.id)">删除</button>
                    </td>
                </tr>
            </table>
        </div>
        <!--添加-->
        <div v-if="mode=='add'">

            书名: <input type="text" v-model="book.name"><br>
            类型:
            <input type="checkbox" v-model="bookType" value="恐怖">恐怖
            <input type="checkbox" v-model="bookType" value="警匪">警匪
            <input type="checkbox" v-model="bookType" value="搞笑">搞笑
            <input type="checkbox" v-model="bookType" value="科幻">科幻
            <br>
            作者:
            <select v-model="book.author">
                <option value="">请选择</option>
                <option >小明</option>
                <option >小天</option>
                <option >等等</option>
            </select>
            <br>
            状态:
            <input type="radio" v-model="book.sell" value="1">在售
            <input type="radio" v-model="book.sell" value="2">下架
            <br>
            价格: <input type="text" v-model="book.money"><br>

            <button @click="addBook">提交</button>

        </div>
        <!--修改-->
        <div v-if="mode=='edit'">
            书名: <input type="text" v-model="book.name"><br>
            类型:
            <input type="checkbox" v-model="bookType" value="恐怖">恐怖
            <input type="checkbox" v-model="bookType" value="警匪">警匪
            <input type="checkbox" v-model="bookType" value="搞笑">搞笑
            <input type="checkbox" v-model="bookType" value="科幻">科幻
            <br>
            作者:
            <select v-model="book.author">
                <option value="">请选择</option>
                <option >小明</option>
                <option >小天</option>
                <option >等等</option>
            </select>
            <br>
            状态:
            <input type="radio" v-model="book.sell" value="1">在售
            <input type="radio" v-model="book.sell" value="2">下架
            <br>
            价格: <input type="text" v-model="book.money"><br>

            <button @click="editBook">修改</button>
        </div>

</div>
<script>

    new Vue({
        el:"#app",
        data:{
            databaseData:{},
            mode:"show",
            tableData:[],
            book:{
                type:"",
                author:"",
                sell:""
            },
            bookType:[],
            query:{
               name:"",
               author:"",
                money1:"",
                money2:"",

            }
        },
        methods:{
            toAdd(){
                this.mode="add";

            },
            addBook(){
                this.book.id= this.tableData.length+1;
                this.book.type=this.bookType.join(",");
                this.tableData.push(this.book);
                this.initFromData();
                this.mode="show";
            },
            initFromData(){
                this.book={
                    type:"",
                        author:"",
                        sell:""
                },
                this.bookType=[];
            },
            toEdit(a){
                this.book=a;
                this.bookType=a.type.split(",");
                this.mode="edit";
            },
            editBook(){
                this.book.type=this.bookType.join(",");
                for (var i = 0; i < this.tableData.length; i++) {
                    if (this.book.id==this.tableData[i].id){
                        this.tableData[i]=this.book;
                        break;
                    }
                }
                this.initFromData();
                this.mode="show";
            },
            deleteBook(id){
                if (confirm("确认删除吗？")){
                    for (var i = 0; i < this.tableData.length; i++) {
                        if (id==this.tableData[i].id){
                            this.tableData.splice(i,1)
                            break;
                        }
                    }
                }
            },
            selectBook(){
                var result=[];
                for (var i = 0; i < this.databaseData.length; i++) {
                    var flag= true;
                    var a=this.databaseData[i]
                    if (this.query.name!=""&&a.name.indexOf(this.query.name)<0){
                        flag=false;                    }

                    if (this.query.author!=""&&a.author!=this.query.author){
                        flag=false;
                    }

                    if (this.query.money1!=""&&a.money<this.query.money1*1){
                        flag=false;
                    }

                    if (this.query.money2!=""&&a.money>this.query.money2*1){
                        flag=false;
                    }

                    if (flag){
                        result.push(a);
                    }
                }
                this.tableData=result;
            }
        },
        created(){

            this.tableData.push({
                id :1,
                name:"哈哈哈",
                type:"恐怖,警匪",
                author:"小明",
                sell:1,
                money:200
            })
            this.tableData.push({
                id :2,
                name:"格林童话",
                type:"恐怖,搞笑",
                author:"小天",
                sell:2,
                money:300
            })
            this.tableData.push({
                id :3,
                name:"的地方",
                type:"恐怖,科幻",
                author:"等等",
                sell:1,
                money:200
            })
            this.databaseData=this.tableData;
        }
    })
</script>
</body>
</html>